<template>
  <div>
    <div class="load" v-if="loading">loading...</div>
    <location-header
      :cities="cities">
    </location-header>
    <location-list
      :letter="letter"
      :cities="cities"
      :hotCities="hotCities"
    ></location-list>
    <location-alphabet
      @change="handleLetterChange"
      :alphabetList="alphabetList"
    ></location-alphabet>
  </div>
</template>

<script>

  import locationHeader from "./components/locationHeader";
  import locationList from "./components/locationList";
  import locationAlphabet from "./components/locationAlphabet";
  import axios from 'axios';

  export default {
    name: 'Location',
    methods: {
      handleLetterChange(letter) {
        this.letter = letter;
      },
      getLocationData() {
        axios.get("/api/city.json")
          .then(this.getLocationDataSucc)
      },
      getLocationDataSucc(res) {
        console.log(res);
        res = res.data;
        if (res.data) {
          this.loading = false;
          const data = res.data;
          this.cities = data.cities;
          this.hotCities = data.hotCities;
          this.alphabetList = data.alphabetList;
        }
      }
    },
    data() {
      return {
        letter: '',
        cities: {},
        hotCities: [],
        alphabetList: [],
        loading: true
      }
    },
    components: {
      locationHeader,
      locationList,
      locationAlphabet
    },
    mounted() {
      this.getLocationData()
    }
  }
</script>

<style lang="stylus" scoped>
  .load
    position: absolute
    top: 50%
    left: 50%
    z-index: 1011
    width: 1.8rem
    height: .5rem
    opacity: .3
    background: #000
    color: #fff
    line-height: .5rem
    text-align: center
    border-radius: .21rem
    padding: .25rem
    transform: translate(-50%, -50%)

</style>
